<template>
  <div>
    <nav-bar>
      <div slot="left">易购优选</div>
      <div slot="center">
        <div @click="ssgoBack">
            <my-search></my-search>
        </div>
      </div>
      <div slot="right">
        <div @click="goBack" class="header-category">
              <i class="iconfont i-icon">&#xe67d;</i>
        </div>
      </div>
    </nav-bar>
    <div class="home" ref="homeList">
      <div>
          <swiper :imgList="message"></swiper>
          <home-catitems :catitems="catitems"></home-catitems>
          <home-floor :floordata="floordata"></home-floor>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import Swiper from '@/components/swiper.vue'
import HomeCatitems from './childComps/HomeCatitems.vue'
import HomeFloor from './childComps/HomeFloor.vue'
import NavBar from '@/components/navbar/NavBar.vue'
import MySearch from '@/components/my-search/my-search.vue'
import { getHomeSwiper, getHomeCatitems, getHomeFloordata } from '@/network/home.js'
export default {
  name: 'Home',
  data () {
    return {
      message: [],
      catitems: [],
      floordata: []
    }
  },
  components: {
    Swiper,
    HomeCatitems,
    HomeFloor,
    NavBar,
    MySearch
  },
  methods: {
    getIndicator () {
      this.$indicator.open({
        text: '加载中'
      })
    },
    getHomeSwiper () {
      this.getIndicator()
      getHomeSwiper().then(res => {
        this.$indicator.close()
        if (res.meta.status !== 200) {
          this.$toast('加载失败')
        } else {
          this.message = res.message
        }
      })
    },
    getHomeCatitems () {
      this.getIndicator()
      getHomeCatitems().then(res => {
        if (res.meta.status !== 200) {
          this.$toast('加载失败')
        }
        this.catitems = res.message
      })
    },
    getHomeFloordata () {
      this.getIndicator()
      getHomeFloordata().then(res => {
        if (res.meta.status !== 200) {
          this.$toast('加载失败')
        }
        this.floordata = res.message
      })
    },
    getBscoll () {
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.homeList, {})
      })
    },
    goBack () {
      this.$router.push({ name: 'category' })
    },
    ssgoBack () {
      this.$router.push({ name: 'Search' })
    }

  },
  created () {
    // this.getImgList()
    this.getHomeSwiper()
    this.getHomeCatitems()
    this.getHomeFloordata()
  },
  mounted () {
    this.getBscoll()
  }
}
</script>

<style lang="scss" scoped>
  .home{
    overflow: hidden;
    position: absolute;
    top: 45px;
    bottom: 50px;
  }
</style>
